<script setup lang="tsx">
import { reactive, ref } from 'vue';
import dayjs from 'dayjs';
import {
  downloadExcel,
  getTableData
} from '@/service/api/modules/collection-management/equipment-dynamic-rate-acquisition';
import Search from './search.vue';

interface Props {
  eqpType: 1 | 2;
}

const props = defineProps<Props>();

function getTime() {
  const today = new Date().setHours(0, 0, 0, 0);
  const lastDay = today - 1000 * 60 * 60 * 24;
  return [dayjs(lastDay).format('YYYY-MM-DD'), dayjs(today).format('YYYY-MM-DD')];
}

const searchParams = ref({
  shiftType: null,
  time: getTime()
});
const pagination = reactive({
  current: 1,
  pageSize: 200,
  showSizeChanger: true,
  pageSizeOptions: ['50', '100', '200', '300', '500'],
  showQuickJumper: true,
  showTotal: (total: number) => {
    return `共${total}条`;
  },
  total: 0,
  onChange: async (current: number, size: number) => {
    pagination.current = current;
    pagination.pageSize = size;
    getData();
  }
});

const tableData = ref([]);

const loading = ref(false);
const columnChecks = ref<any[]>([
  {
    key: 'index',
    dataIndex: 'index',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'subEqpNo',
    dataIndex: 'subEqpNo',
    title: '机台号',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'subEqpName',
    dataIndex: 'subEqpName',
    title: '机台名称',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'shiftType',
    dataIndex: 'shiftType',
    title: '班次',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'shiftDate',
    dataIndex: 'shiftDate',
    title: '时间',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'modeType',
    dataIndex: 'modeType',
    title: '模式',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'shiftOperateTime',
    dataIndex: 'shiftOperateTime',
    title: '准备时间',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'lotRunTime',
    dataIndex: 'lotRunTime',
    title: '操作时间',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'shiftWaitTime',
    dataIndex: 'shiftWaitTime',
    title: '等待时间',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'duty',
    dataIndex: 'duty',
    title: '稼动率',
    align: 'center',
    checked: true,
    ellipsis: true
  }
]);
function reset() {
  search();
}

function search() {
  pagination.current = 1;
  getData();
}

function getData() {
  const params: any = {
    pageNum: pagination.current,
    pageSize: pagination.pageSize - 1,
    eqpType: props.eqpType,
    shiftType: searchParams.value.shiftType
  };
  if (searchParams.value.time?.[0]) {
    params.startTime = dayjs(searchParams.value.time[0]).format('YYYY-MM-DD');
    params.endTime = dayjs(searchParams.value.time[1]).format('YYYY-MM-DD');
  }
  loading.value = true;
  getTableData(params)
    .then(({ data, error }) => {
      if (!error) {
        data.list.forEach((item: any, index: number) => {
          item.index = index + 1;
        });
        console.log('data.list :>> ', data.list);
        pagination.total = data.total;
        tableData.value = data.list;
      }
    })
    .finally(() => (loading.value = false));
}

getData();

const currentRowId = ref(null);
const customRow = record => {
  const obj: any = {};
  if (record.subEqpNo === '平均稼动率') {
    obj.position = 'sticky';
    obj.bottom = 0;
    obj['background-color'] = '#fff';
  }
  return {
    style: {
      // 'background-color': record.rhythmUuid === currentRowId.value ? 'rgba(86, 205, 243, 0.3)' : '',
      ...obj
    },
    class: record.rhythmUuid && record.rhythmUuid === currentRowId.value ? 'jl-table-row-selected' : '',
    onClick: () => {
      console.log(record);
      currentRowId.value = record.rhythmUuid;
    }
  };
};

function exportExcel() {
  const params: any = {
    eqpType: props.eqpType,
    shiftType: searchParams.value.shiftType
  };
  if (searchParams.value.time?.[0]) {
    params.startTime = dayjs(searchParams.value.time[0]).format('YYYY-MM-DD');
    params.endTime = dayjs(searchParams.value.time[1]).format('YYYY-MM-DD');
  }
  const fileName = `${props.eqpType === 1 ? '钻孔钻机稼动率' : '成型锣机稼动率'}导出${dayjs().format('YYYY-MM-DD HH:mm:ss')}.xlsx`;
  downloadExcel(params, fileName);
}
</script>

<template>
  <div class="jl-main-page one-code-ascend min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <Search v-model:model="searchParams" @reset="reset" @search="search" />
    <ACard
      :bordered="false"
      :body-style="{ flex: 1, overflow: 'hidden' }"
      class="table-card flex-col-stretch sm:flex-1-hidden card-wrapper"
    >
      <template #title>
        <AButton type="primary" size="small" ghost class="mini-btn mr-8px" @click="exportExcel">
          <template #icon>
            <icon-ic-round-download class="align-sub text-icon" />
          </template>
          <span class="ml-3px">导出</span>
        </AButton>
      </template>
      <template #extra>
        <TableColumnSetting v-model:columns="columnChecks" />
      </template>
      <ATable
        :columns="columnChecks"
        :data-source="tableData"
        bordered
        size="small"
        :loading="loading"
        row-key="rhythmUuid"
        :pagination="pagination"
        :custom-row="customRow"
        :scroll="{ x: 1680, y: 'auto' }"
        class="h-full"
      />
    </ACard>
  </div>
</template>

<style></style>
